<template>
  <!-- 筛选区 -->
  <div class="sub-filter">
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a
          href="javascript:;"
          :class="{ active: filterData.selectedBrand === i.id }"
          @click="changeBrand(i.id)"
          v-for="i in filterData.brands"
          :key="i.id"
        >
          {{ i.name }}
        </a>
      </div>
    </div>
    <!-- 属性筛选 -->
    <div class="item" v-for="item in filterData.saleProperties" :key="item.id">
      <div class="head">{{ item.name }}：</div>
      <div class="body">
        <a
          :class="{ active: item.selectedProp === it.id }"
          @click="changeProp(item, it.id)"
          href="javascript:;"
          v-for="it in item.properties"
          :key="it.id"
          >{{ it.name }}</a
        >
      </div>
    </div>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { findSubCategoryFilter } from '@/api/category'
export default {
  name: 'SubFilter',
  setup (props, { emit }) {
    const route = useRoute()
    // 数据
    const filterData = ref({})

    // 使用侦听器 检测数据的改变
    watch(
      route,
      () => {
        // 地址 必须是 二级路由
        if (route.path === `/category/sub/${route.params.id}`) {
          findSubCategoryFilter(route.params.id).then(res => {
            // 左侧 添加品牌
            res.result.brands.unshift({
              name: '全部',
              id: undefined // 服务器返回的数据 id 不确定是什么,肯定不是 undefined
            })

            // 商品的 筛选属性
            res.result.saleProperties.forEach(v => {
              v.properties.unshift({
                name: '全部',
                id: undefined
              })
            })
            filterData.value = res.result
          })
        }
      },
      {
        // 默认触发一次
        immediate: true
      }
    )

    // 获取筛选的条件 并返回
    const formatFilter = () => {
      // 组合数据 并提交出去
      const filterParams = {
        // 通过 大的数据 获取 品牌的id
        brandId: filterData.value.selectedBrand,
        attrs: []
      }
      filterData.value.saleProperties.forEach(v => {
        // 找到用户选中的那个 属性
        const _prop = v.properties.find(p => {
          return p.id === v.selectedProp
        })
        // 整合数据
        filterParams.attrs.push({
          groupName: v.name,
          propertyName: _prop.name
        })
      })

      return filterParams
    }

    // 切换品牌
    const changeBrand = id => {
      // 不重复判断
      if (filterData.value.selectedBrand !== id) {
        // 修改 高亮状态
        filterData.value.selectedBrand = id
        // 获取 筛选数据
        const _filterParams = formatFilter()

        // 提交给 父组件
        emit('filterChange', _filterParams)
      }
    }
    // 切换 筛选条件
    const changeProp = (prop, id) => {
      // prop 对象
      // console.log('prop:', prop)
      // console.log('id:', id)
      // 不重复 判断 避免性能的浪费
      if (prop.selectedProp !== id) {
        prop.selectedProp = id
        // 获取 筛选数据
        const _filterParams = formatFilter()
        // 提交给 父组件
        emit('filterChange', _filterParams)
      }
    }
    // 返回
    return {
      filterData,
      changeBrand,
      changeProp
    }
  }
}
</script>
<style scoped lang="less">
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>
